<template>
    <div class="rankitem" v-if="rank_list">
        <router-link tag="div" class="rank_item" :to="/detailpage/ + i.comic_id" v-for="(i, ind) in rank_list" :key="i.comic_id">
            <div class="rank" :class="ind + 1 == 1 || ind + 1 == 2 || ind + 1 == 3 ? 'active' : ''">
                <span>{{ (ind + 1) | rank }}</span>
            </div>
            <div class="img">
                <img :src="i.vertical_cover" alt="" />
            </div>
            <div class="contend">
                <div class="top">{{ i.title }}</div>
                <div class="bottom">
                    <span>{{ i.author | author }}</span>
                    <span v-if="i.styles[0]"> {{ i.styles[0] | aname }}</span>
                    <span> {{ i.last_short_title | state }}</span>
                </div>
            </div>
        </router-link>
    </div>
</template>

<script>
import { myRank } from "../request";
export default {
    props: ["list_id"],
    name: "RankItem",
    data() {
        return {
            rank_list: [],
            index: 3,
            type: [],
        };
    },
    methods: {
        getRank() {
            this.rank_list = [];
            myRank({ type: this.index }).then((data) => {
                if (data.code == 0) {
                    this.rank_list = data.data;
                    // this.type = this.rank_list.map((data) => {
                    //     return data.styles[0].name;
                    // });
                }
            });
        },
    },
    watch: {
        list_id(x) {
            this.index = x;
            this.getRank();
        },
    },

    mounted() {
        this.getRank();
    },
    filters: {
        author(x) {
            let str = "";
            for (let i = 0; i < x.length; i++) {
                str += x[i] + " ";
            }
            return str;
        },
        state(x) {
            return "更新至" + x + "话";
        },
        aname(x) {
            return x.name;
        },
        rank(x) {
            if (x > 3 && x < 10) {
                return "0" + x;
            }
            return x;
        },
    },
};
</script>

<style lang="scss" scoped>
.rankitem {
    margin-bottom: 3.4375rem;
    width: 100%;
    overflow: hidden;
    .top {
        color: #bc5a50;
    }
    .rank_item {
        margin-top: 1.4375rem;
        width: 100%;
        height: 8.375rem;
        display: flex;
        .rank {
            box-sizing: border-box;
            width: 2.375rem;
            display: flex;
            justify-content: flex-end;
            color: #cf9870;
            font-size: 1.625rem;
            font-weight: bolder;
            position: relative;
        }
        .rank.active {
            font-size: 3.75rem;
            font-style: italic;
            padding-bottom: 0.625rem;
        }
        .rank.active span {
            position: absolute;
            top: -0.8125rem;
        }
        .img {
            width: 6.375rem;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .contend {
            box-sizing: border-box;
            padding-left: 0.625rem;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .top {
                flex: 1;
                font-size: 1.125rem;
            }
            .bottom {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                font-size: 0.8125rem;
                color: #a2a9b3;
            }
        }
    }
}
</style>
